<template>
  <nav-back title="个人中心" />
  <div class="base-info">
    <img :src="info.pic" alt="" @click="router.push('/update')" />
    <p>{{ info.name }}</p>
  </div>
  <van-cell-group>
    <van-cell title="我的收藏" is-link url="#/store" />
    <van-cell title="退出登录" @click="signout" />
  </van-cell-group>
</template>

<script setup>
import NavBack from "../components/NavBack.vue";
import { useStore } from "vuex";
import { computed } from "vue";
import { useRouter } from "vue-router";
import * as utils from "../assets/utils";

const store = useStore(),
  router = useRouter();
const info = computed(() => store.state.info);
const signout = () => {
  utils.store.remove("tk");
  location.href = location.href.replace(/#(.+)/g, "");
};
</script>

<style lang="less" scoped>
.base-info {
  box-sizing: border-box;
  margin: 20px 0;

  img {
    display: block;
    margin: 0 auto;
    width: 86px;
    height: 86px;
    border-radius: 50%;
  }

  p {
    line-height: 50px;
    font-size: 18px;
    text-align: center;
  }
}
</style>